<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/pages/basic/html-head.jsp" %>

<div class="container-fluid">
    <div class="btn-toolbar body-block-wrapper">
        <div class="pull-right">
            <div class="input-append form-group">
                <input type="text" class="form-control top-search-input" placeholder="输入查询关键字" id="fuzzy-search">
                <button type="button" class="btn btn-myself btn-sm" id="btn-search">
                    <i class="fa fa-search"></i>查询
                </button>
            </div>
        </div>
        <button type="button" class="btn btn-primary toolbar-item" id="btn-add">
            <i class="fa fa-plu"></i> 添加
        </button>
        <button type="button" class="btn btn-primary toolbar-item" id="btn-edit">
            <i class="fa fa-edit"></i> 修改
        </button>
        <button type="button" class="btn btn-primary toolbar-item" id="btn-del">
            <i class="fa fa-remove"></i> 删除
        </button>
        <button type="button" class="btn btn-primary toolbar-item" id="btn-detail">
            <i class="fa fa-plu"></i> 明细
        </button>
        <button type="button" class="btn btn-primary toolbar-item" id="btn-url">
            <i class="fa fa-add"></i> 生成地址
        </button>
        <button type="button" class="btn btn-primary toolbar-item" id="btn-barcode">
            <i class="fa fa-add"></i> 生成二维码
        </button>
    </div>
    <div class="body-block-wrapper">
        <table id="datatable" class="table table-bordered hover" border="1" width="100%">
            <thead>
            <tr>
                <th><input type="checkbox" name="cb-check-all"/></th>
                <th>id</th>
                <th>编号</th>
                <th>标题</th>
                <th>发起人</th>
                <th>发起日期</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>投票地址</th>
                <th>修改人</th>
                <th>修改日期</th>
            </tr>
            <thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <div class="win_hidden_div">
        <!--编辑表单  -->
        <div id="edit" iconCls="icon-save" title="编辑">
            <div class="easyui-layout" data-options="fit:true">
                <form id="editForm" method="post">
                    <input type="hidden" name="id">
                    <input type="hidden" name="entryid">
                    <input type="hidden" name="url">
                    <input type="hidden" name="barcode">
                    <input type="hidden" name="entrydt" class="easyui-datebox">
                    <div data-options="region:'center',border:false" style="padding:10px;">
                        <table>
                            <tr>
                                <td>
                                    <label for="code">编码:</label>
                                </td>
                                <td>
                                    <input id="code" class="easyui-validatebox" type="text" name="code"
                                           required="true"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="title">标题:</label>
                                </td>
                                <td>
                                    <input id="title" class="easyui-validatebox" type="text" name="title"
                                           required="true"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="startDate">开始日期:</label>
                                </td>
                                <td>
                                    <input id="startDate" class="easyui-datebox" name="startdt" type="text"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="endtDate">结束日期:</label>
                                </td>
                                <td>
                                    <input id="endtDate" class="easyui-datebox" name="enddt" type="text"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div data-options="region:'south',border:false" style="text-align:center;padding:5px;height:50px;">
                        <input type="submit" class="btn btn-success" value="提交">
                    </div>
                </form>
            </div>
        </div>
        <div id="qrcodewin" iconCls="icon-save" title="访问二维码">
            <div class="easyui-layout" data-options="fit:true">
                <div style="padding-top:20px;width:100%;height:100%;text-align:center;">
                    <div id="qrcode"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var $table = $('#datatable');
        var contextPath = '${pageContext.request.contextPath}';
        var _table = $table.dataTable($.extend(true, {}, CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
            ajax: function (data, callback, settings) {//ajax配置为function,手动调用异步查询
                var param = fitParams.getQueryCondition(data);
                $.ajax({
                    type: "POST",
                    url: contextPath + "/vote/list",
                    cache: false,  //禁用缓存
                    data: param,    //传入已封装的参数
                    dataType: "json",
                    success: function (result) {
                        //setTimeout仅为测试延迟效果
                        setTimeout(function () {
                            //异常判断与处理
                            if (result.errorCode) {
                                $.messager.alert('提示信息', '查询失败。错误码：' + result.errorCode, 'warning');
                                return;
                            }

                            var returnData = {};
                            returnData.draw = data.draw;
                            returnData.recordsTotal = result.recordsTotal;
                            returnData.recordsFiltered = result.recordsTotal;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.data;

                            //console.debug(data);
                            //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }, 200);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.messager.alert('提示信息', '查询失败', 'warning');
                        // $wrapper.spinModal(false);
                    }
                });
            },
            scrollX: "100%",
            columns: [
                CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                {
                    className: "ellipsis",
                    data: "id",
                    visible: false,
                },
                {
                    className: "ellipsis",
                    data: "code",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "title",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "entryid",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "entrydt",
                    render: CONSTANT.DATA_TABLES.RENDER.DATAFORMAT,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "startdt",
                    render: CONSTANT.DATA_TABLES.RENDER.DATAFORMAT,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "enddt",
                    render: CONSTANT.DATA_TABLES.RENDER.DATAFORMAT,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "url",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                    width: "280px",
                },
                {
                    className: "ellipsis",
                    data: "updateid",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                    width: "100px",
                },
                {
                    className: "ellipsis",
                    data: "updatedt",
                    render: CONSTANT.DATA_TABLES.RENDER.DATAFORMAT,
                    width: "100px",
                }
            ],
            "createdRow": function (row, data, index) {
                //$('td', row).eq(4).css("display","none");
            },
            "drawCallback": function (settings) {
                $("tbody tr", $table).eq(0).click();
            }
        })).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象


        //行点击事件
        $("tbody", $table).on("click", "tr", function (event) {
            //获取该行对应的数据
            var item = _table.row($(this).closest('tr')).data();
            //console.debug(item);
        });

        $table.on("change", ":checkbox", function () {
            if ($(this).is("[name='cb-check-all']")) {
                //全选
                $(":checkbox", $table).prop("checked", $(this).prop("checked"));
            } else {
                //一般复选
                var checkbox = $("tbody :checkbox", $table);
                $(":checkbox[name='cb-check-all']", $table).prop('checked', checkbox.length == checkbox.filter(':checked').length);
            }
        }).on("click", ".td-checkbox", function (event) {
            //点击单元格即点击复选框
            !$(event.target).is(":checkbox") && $(":checkbox", this).trigger("click");
        });
        //模糊查询事件
        $("#btn-search").click(function () {
            _table.draw();
        });
        //添加事件
        $("#btn-add").click(function () {
            $('#editForm').form('clear');
            $('#edit').window({
                width: 400,
                height: 400,
                modal: true,
                minimizable: false,
                inline: false
            });
        });
        //编辑事件
        $("#btn-edit").click(function () {
            var arrItemId = [];
            $("tbody :checkbox:checked", $table).each(function (i) {
                var item = _table.row($(this).closest('tr')).data();
                arrItemId.push(item);
            });
            $('#editForm').form('clear');
            if (arrItemId.length == 1) {
                $('#editForm').form('load', contextPath + '/vote/get?id=' + arrItemId[0].id);
            } else {
                $.messager.alert('提示信息', '请选择 一条信息', 'warning');
                return;
            }
            $('#edit').window({
                width: "400",
                height: "400",
                modal: true,
                minimizable: false,
                inline: false
            });
        });
        //提交
        $('#editForm').form({
            url: contextPath + "/vote/saveorupdate",
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                if (result.status == "fail") {
                    $.messager.alert("提示信息", "数据添加失败！", "error");
                }
                $('#edit').window('close');
                _table.draw();
            }
        });
        $('#editForm').submit();
        //删除事件（支持批量删除）
        $("#btn-del").click(function () {
            var arrItemId = [];
            $("tbody :checkbox:checked", $table).each(function (i) {
                var item = _table.row($(this).closest('tr')).data();
                arrItemId.push(item.id);
            });
            CONSTANT.FUNCTION.deleteItemNoId(arrItemId, contextPath + "/vote/delete", _table);
        });
        $("#btn-url").click(function () {
            var selectRoleItem = CONSTANT.FUNCTION.tableselectone($table, _table);
            if (selectRoleItem == null) {
                return;
            }
            $.ajax({
                type: "POST",
                url: contextPath + "/vote/seturl",
                data: {
                    id: selectRoleItem.id
                },
                cache: false,  //禁用缓存
                dataType: "json",
                success: function (res) {
                    if (res.status == "success") {
                        $.messager.alert("提示信息", "生成访问地址成功！", "success");
                        _table.draw();
                    } else {
                        $.messager.alert("提示信息", "生成访问地址失败！", "success");
                    }
                }
            });
        });
        $("#btn-barcode").click(function () {

            var selectItem = CONSTANT.FUNCTION.tableselectone($table, _table);
            if (selectItem == null) {
                return;
            }
            $('#qrcodewin').window({
                width: "310",
                height: "310",
                modal: true,
                minimizable: false,
                inline: false
            });
            if (selectItem.url == null || selectItem.url == "") {
                $.messager.alert("提示信息", "请先生成访问地址！", "success");
            }
            jQuery('#qrcode').qrcode({
                text: selectItem.url
            });
        });
        $("#btn-detail").click(function () {
            var selectItem = CONSTANT.FUNCTION.tableselectone($table, _table);
            if (selectItem == null) {
                return;
            }
            window.location.href = contextPath + "/votedetail/main?voteid=" + selectItem.id;
        });


    });


    //组装参数
    var fitParams = {
        currentItem: null,
        getQueryCondition: function (data) {
            var param = {};
            //组装排序参数
            if (data.order && data.order.length && data.order[0]) {
                switch (data.order[0].column) {
                    case 1:
                        param.orderColumn = "id";
                        break;
                    case 2:
                        param.orderColumn = "code";
                        break;
                    case 3:
                        param.orderColumn = "title";
                        break;
                    case 4:
                        param.orderColumn = "entryid";
                        break;
                    case 5:
                        param.orderColumn = "entrydt";
                        break;
                    case 6:
                        param.orderColumn = "startdt";
                        break;
                    case 7:
                        param.orderColumn = "enddt";
                        break;
                    case 8:
                        param.orderColumn = "url";
                        break;
                    case 9:
                        param.orderColumn = "updateid";
                        break;
                    case 10:
                        param.orderColumn = "updatedt";
                        break;
                    default:
                        param.orderColumn = "id";
                        break;
                }
                param.orderDir = data.order[0].dir;
            }
            //组装查询参数
            param.fuzzy = $("#fuzzy-search").val();
            if (param.fuzzy == "") {
                param.fuzzySearch = false;
            } else {
                param.fuzzySearch = true;
            }
            //组装分页参数
            param.currentItem = data.start;
            param.pageSize = data.length;
            param.draw = data.draw;
            return param;
        }

    };

</script>
<%@include file="/pages/basic/html-foot.jsp" %>